<template>
    <div>
       <el-dialog
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        :before-close="close"
        width="35%"
        top="15vh"
       >
        <div slot="title">
            <span style="text-align: center;font-size: 20px;color: #000; display: flex;justify-content: center;">调整星级</span>
        </div>
        <div class="integral_content">
            <div class="integral_content_top">
                <span>Ta的星级</span>
                <div>
                    <el-rate v-model="userObj.starId" disabled color='#FF9900' :max="userObj.starId"></el-rate>
                </div>
            </div>
            <div class="integral_content_conter">
              <span>调整星级</span>
              <div>
                   <el-rate v-model="starId" color='#FF9900' @change="selectStar"></el-rate>
              </div>
            </div>
        </div>  
        <div slot="footer" class="dialog-footer" style="margin-top: 20px;">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="resetForm()">确 定</el-button>
        </div>
       </el-dialog>
    </div>
</template>

<script>
export default {
  name: "adjustStar",
  props: {
    propsObj: {   // 用户数据
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      centerDialogVisible: true,  
      userObj: {},
      starId:  null,  // 调整星级id
    }
  },
  watch: {
    propsObj: {
      handler(val,oldval){
        this.userObj = val;
        this.userObj.starId = Number(this.userObj.starId);
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
    // 关闭弹框；
    closeTheReportDialog(){
      this.centerDialogVisible = false;
    },
    close(){
      this.$emit('closeTheReportDialog');
    },
    // 调整星级
    selectStar(item){
      this.starId = item
    },
    // 确定
    resetForm(){
      if (this.starId === 0) {
        this.$message.warning('你还没有调整星级，不能确定！');
      }else{
        this.userObj.starId = this.starId;
        this.$emit('userAdjustStar',this.userObj)
        this.$message.success('调整成功！');
        this.close()
      }
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
.integral_content{
    margin-left: 11%;
    .integral_content_top{
       width: 100%;
       display: flex;
       justify-content: start;
       align-items: center;
       span{
          font-size: 16px;
          color: #000;
          margin-right: 13px;
       }
    }
    .integral_content_conter{
        margin-top: 55px;
        display: flex;
        justify-content: start;
        align-items: center;  
        span{
            font-size: 16px;
            color: #000;
            margin-right: 13px;
        }
    }
}
</style>
<style>
 .integral_content_top .el-icon-star-on {
   font-size: 60px;
}
 .integral_content_conter .el-icon-star-on {
   font-size: 60px;
} 
 .el-icon-star-off {
   font-size: 60px;
}
 .el-rate__item {
    margin-top: -21px;
}
</style>